<template>
  <div class="article-list">
    <el-card v-for="article in articles" :key="article.id" class="article-card" shadow="hover">
      <!-- 重新组织文章头部布局 -->
      <div class="article-header">
        <!-- 头像和作者信息 -->
        <!-- 标题和标签 -->
        <div class="title-container">
          <AuthorInfo :author="post.author" :author-avatar="post.authorAvatar" :author-rank="post.authorRank"
            :author-ip="post.authorIp" :likes-count="post.likesCount" :reads-count="post.readsCount"
            :collections-count="post.collectionsCount" :title="post.title" />
          <router-link :to="{ path: '/article' }" target="_blank" class="article-link">
            <span class="article-title">{{ article.discussTitle }}</span>
          </router-link>
        </div>
      </div>
      <div class="article-tags">
        <el-tag v-for="lebals in article.discussLabelList" :key="lebals.id" size="mini" type="info" class="tag-item">
          {{ lebals.discussLabelName }}
        </el-tag>
      </div>
      <div>
        <router-link :to="{ path: '/article' }" target="_blank" class="article-link">
          <p class="article-content">{{ article.discussContent.substring(0, 70) + '...' }}</p>
        </router-link>
      </div>
      <div class="article-footer">
        <el-button class="article-btn" type="text" icon="el-icon-thumb">{{ article.likedNum }}</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button class="article-btn" type="text" icon="el-icon-star-off">{{ article.collects }}</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button class="article-btn" type="text" icon="el-icon-chat-round">{{ article.views }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import AuthorInfo from './AuthorInfo.vue';
import Avatar from './NavigationBar.vue';
export default {
  components: {
    Avatar,
    AuthorInfo
  },
  name: 'ArticleList',
  props: {
    articles: {
      type: Array, // 假设 articles 是一个数组
      required: true // 表示这个 prop 是必需的
    }
  },

  data() {
    return {
      post: {
        title: "Vue3 + TypeScript 工程化实践经验分享, 你值得拥有！",
        author: "前端达人",
        authorAvatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        isPlus: true,
        createTime: "2024-12-20",
        content: "目前中大硕士研二在读，本科是重邮。读研后发过做过一点研究工作，现在投了一个会议没出结果，毕业肯定是没问题。其他时间都在做项目，项目内容偏视觉算法复现还有一些简单的机器人控制。但是感觉学的这些真的没有什么对口工作能找。目前AI领域研究风向早已转向大模型，组里面现在想往具身智能转，但是也看不到什么出路。现在就想找实习工作，可惜的是目前只有python用的熟一点，其他语言只能说了解会简单的语法。想问问大家我这种能找到对口工作吗？如果转开发应该往哪个方向好一点？谢谢大家...",
        likes: 128,
        collects: 56,
        views: 1234,
        authorRank: "9999+",
        authorIp: '广州',
        likesCount: 1234,
        readsCount: 567,
        collectionsCount: 987,
        authorStats: {
          solved: 856,
          submissions: 1234,
          posts: 42
        },
        comments: [
          {
            id: 1,
            author: "TypeScript爱好者",
            avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            content: "写得很好，特别是关于类型推导的部分很有帮助！",
            time: "2小时前",
            likes: 12
          },
          {
            id: 2,
            author: "Vue学习者",
            avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            content: "请问composition API的最佳实践是怎样的？",
            time: "1小时前",
            likes: 5
          }
        ]
      },
    }
  },
  created() {
    //this.getDiscussInfo(this.post);
  },
  methods: {
    
    handleClick(tab, event) {
      console.log(tab, event);
    },
    like(article) {
      article.likes += 1;
    },

    favorite(article) {
      this.$message.success("已收藏文章：" + article.title);
    },
    toggleComments(article) {
      article.showComments = !article.showComments;
    },
    getDiscussInfo(article) {
      article.showComments = !article.showComments;
    },
  },
}
</script>

<style scoped>
.article-list {
  padding-left: 20px;
  padding-right: 20px;
}

.article-card {
  margin-bottom: 20px;
}

.article-header {
  display: flex;
}

.title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-tags {
  gap: 10px;
}

.tag-item {
  margin-right: 10px;
}

.article-link {
  /* color: #409eff; */
  text-decoration: none;
}

.article-title {
  font-size: 18px;
  /* font-weight: bold; */
  color: black;
}

.article-content {
  font-size: 14px;
  line-height: 2;
  color: #403f3f;
}

.article-footer {
  gap: 10px;
  /* background: blue; */
}

.article-btn {
  font-size: 16px;
  color: #403f3f;
}
</style>
